<!-- 搜索结果 -->
<script setup lang="ts" name="searchResult">
import { onMounted } from 'vue'
import useSearchResult from '@/components/index/hooks/searchResult'
const { menu, actived, resultComponent, menuClicked, searchKeyWords, assignTitle } =
  useSearchResult()
// path 检查
import { useRoute } from 'vue-router'
onMounted(() => {
  menuClicked(0)
  const route = useRoute()
  if (route.query) {
    const key = route.query.key
    assignTitle({ msg: '搜索结果', img: '/src/components/icons/title/search.svg' })
    searchKeyWords(key as string)
  }
})
</script>

<template>
  <div>
    <ul class="menu">
      <li
        class="default-button"
        :class="{ active: actived === item.id }"
        v-for="item in menu"
        :key="item.id"
        @click="menuClicked(item.id)"
      >
        {{ item.item }}
      </li>
    </ul>
    <div class="result">
      <component :is="resultComponent"></component>
    </div>
  </div>
</template>

<style scoped lang="less">
.active {
  background-color: var(--color2);
  color: var(--color3);
}
.menu {
  display: flex;
  list-style: none;
  border-bottom: 2px dashed var(--color2);
  > li {
    cursor: pointer;
    padding: 10px;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--color3);
  }
}
.result {
  margin-top: 6px;
}
</style>
